<template>
  <div id="body">
    <el-container>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
            <el-row>
              <!-- 登录表单区域,绑定数据 -->
              <el-form
                class="loginform"
                ref="loginFormRef"
                :model="loginForm"
                :rules="loginFormRules"
                label-width="10px"
              >
                <!-- 用户名 -->
                <!-- <label style="color:red">用户名</label> -->
                <el-form-item label="" class="whiteitem" prop="username">
                  <el-row>
                    <el-input
                      v-model="loginForm.username"
                      prefix-icon="el-icon-search"
                    ></el-input>
                  </el-row>
                </el-form-item>
                <!-- 密码 -->
                <!-- <label style="color:red">密码</label> -->
                <el-form-item label="" class="whiteitem" prop="password">
                  <el-row>
                    <el-input
                      v-model="loginForm.password"
                      type="password"
                      prefix-icon="el-icon-search"
                    ></el-input>
                  </el-row>
                </el-form-item>
                <!-- 按钮区域 -->
                <el-form-item class="btns">
                  <el-button type="primary" @click="login">登录</el-button>
                  <el-button
                    type="info"
                    style="margin-left:10px;"
                    @click="resetLoginForm"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </el-row>
          </el-main>
        </el-container>
      </el-container>

      <!-- 底部导航栏 -->
      <!-- <el-footer> -->
      <!-- 底部组件 -->
      <!-- <Bottom></Bottom> -->
      <!-- </el-footer> -->
    </el-container>
  </div>
</template>
<script>
// import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'

// import Index from '~/components/index'
// import Bottom from '~/components/bottom'

import Cookies from 'js-cookie' //npm install js-cookie --save yarn add js-cookie

export default {
  data() {
    return {
      radius: 3000,

      // icon: require('@/assets/images/onlinecar.png'),
      activeIndex: '1',

      activeName: 'first',
      //这是登录表单的数据绑定对象
      loginForm: {
        username: '',
        password: ''
      },
      //这是表单的验证规则对象
      loginFormRules: {
        //验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
        ],
        //验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在3到10个字符', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    // Index,
    // Bottom
  },
  created() {},

  mounted() {
    console.log('执行了后台请求了')
    this.$axios({
      method: 'get',
      params: {
        // tablename:node.data.text+new Date().getTime()
        account: '1'
      },
      url: 'http://127.0.0.1:8082/login/userlogin2'
    }).then(res => {
      console.log(res.data)
    })
    //将下面这种格式的参数转换为把 {name: 'admin', pwd: 123}这种转换成name=admin&pwd=123就可以通过
    //  * x-www-form-urlencoded这种方式提交（默认是这种）
    //     @RequestParam

    // 这个是什么意思，这个是只能从请求的地址中取出参数，
    // 也就是只能从username=admin&password=admin这种字符串中解析出参数，
    // 这样是不能提取出请求体中的参数的。
    // let postData = this.$qs.stringify({
    let postData = this.$qs.parse({
      account: '123456',
      password: '123456'
    })
    // let params = new URLSearchParams()
    // params.append('account', '杨晔') //你要传给后台的参数值 key/value
    // params.append('password', '柴蓉')

    // this.$axios({
    //   headers: {
    //     // 'content-Type': 'application/json;charset=UTF-8',
    //     // Accept: 'application/json;charset=UTF-8'
    //   },
    //   method: 'post',
    //   url: 'http://127.0.0.1:8082/login/userlogin',
    //   data: postData
    // }).then(res => {
    //   console.log(res.data)
    // })

    //头部加入在网页的头部中增加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度
    let meta = document.createElement('meta')
    meta.content =
      'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'
    meta.name = 'viewport'
    document.getElementsByTagName('head')[0].appendChild(meta)
    //获取屏幕分辨率
    let b = document.getElementById('body')

    // b.style.height = window.innerHeight + 'px'
    console.log('屏幕宽度：' + screen.availWidth)

    console.log('屏幕高度：' + screen.availHeight)
    console.log('屏幕宽度：' + screen.width)
    console.log('屏幕高度：' + screen.height)
    //每隔十分钟自动刷新首页数据
    // window.setInterval(() => {
    //         setTimeout(
    //           this_.init()
    //           , 0)
    //        },60000)
  },

  methods: {
    //点击重置按钮，重置登录表单
    resetLoginForm() {
      //console.log(this)
      //将表单绑定为loginFormRef
      this.$refs.loginFormRef.resetFields()
    },
    login() {
      // this.$axios.get('http://127.0.0.1:8082/add/table').then(
      //   res=>{
      //       console.log(res.data);

      //   }
      // )
      //   this.$axios({
      //     method:'post',
      //     url:'http://127.0.0.1:8082/add/table2',
      //     data:{
      //       tablename:node.data.text
      //     }
      //   }).then((res)=>{
      //     console.log(res.data);
      //   })
      // this.$axios({
      //   method: 'get',
      //   params: {
      //     // tablename:node.data.text+new Date().getTime()
      //     tablename: node.data.id
      //   },
      //   url: 'http://127.0.0.1:8082/add/table2'
      // }).then(res => {
      //   console.log(res.data)
      // })
      let this_ = this
      //用表单的引用对象调用函数进行前端校验

      if (
        this_.loginForm.username == '郑猋' &&
        this_.loginForm.password == '123456'
      ) {
        this.$message.success('登录成功')
        //分为三级权限1 表示最高 2 次之 3 最低。
        Cookies.set('token', '1')
        console.log('登录中' + Cookies.get('token'))
        //   window.sessionStorage.setItem("token",res.data.token);
        this.$router.push('/home')
      } else if (
        this_.loginForm.username == '海清' &&
        this_.loginForm.password == '123456'
      ) {
        this.$message.success('登录成功')
        //分为三级权限1 表示最高 2 次之 3 最低。
        Cookies.set('token', '2')
        console.log('登录中' + Cookies.get('token'))

        this.$router.push('/home')
      } else {
        return this.$message.error('登录失败！')
      }
      //this.$refs.loginFormRef.validate(async valid=>{
      // if(!valid) return;
      //访问后台地址，传参数,如果不加await async返回的是一个promise对象
      //取出data中的数据
      //    const {data: res}=await this.$http.post("login",this.loginForm);
      //    if(res.meta.status!==200) return this.$message.error("登录失败！");
      //    this.$message.success("登录成功");

      //1.将登录成功后的token,b保存到客户端的sessionStorage中
      //1.1项目中的除了登陆之外的其他API接口，必须在登录之后才能访问
      //1.2token只应在当前网站打开期间生效所以将token保存在sessionSorage中
      //
      //    if(this.$refs.loginFormRef.username=="慕容小小"&&this.$refs.loginFormRef.password=="123456"){
      //                   this.$message.success("登录成功");
      //                   window.sessionStorage.setItem("token",res.data.token);
      //                   this.$router.push("/index");
      // }else{
      //     return this.$message.error("登录失败！");
      // }

      //    console.log("登录成功");
      //   })
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter()
      this.circlePath.radius = e.target.getRadius()
    },
    //退出的功能实现原理：基于token的方式实现退出比较简单，只需要销毁本地token即可。这样，后续的请求
    //就不会携带token,必须重新登录生成一个新的token后才可以访问页面
    //退出登陆
    // init(){
    //     let this_ = this;
    //     this.$http.post("/oilWell/zheng").then(function(respon){
    //                    let j=0;
    //                    let q=0;
    //                    this_.onlinenumber=0;
    //                    this_.offlinenumber=0;
    //                    this_.totalnumber=0;
    //                    this_.$forceUpdate();
    //           for(let i=0;i<respon.data.length;i++){
    //                     if(respon.data[i].status=="online"){
    //                               this_.onlinenumber++;

    //                     }else if(respon.data[i].status=="offline"){
    //                               this_.offlinenumber++;

    //                     };
    //                     this_.totalnumber=this_.onlinenumber+this_.offlinenumber;

    //              }

    //             this_.offline=respon.data;

    //             //判断离线或者在线的车辆

    //       }).catch(function(error){
    //         // alert("请求数据出错！");
    //       });

    //    this.$http.post("/oilWell/biao").then(function(respon){
    //            for(let i=0;i<respon.data.length;i++){

    //                  //将后台传过来的字符串类型转换为数值型，否则无法计算
    //                  let lat=parseFloat(respon.data[i].latitude);
    //                  let lon=parseFloat(respon.data[i].longitude);

    //                   let res=this_.wgs2bd(lat,lon);

    //                   respon.data[i].latitude=res[0];
    //                   respon.data[i].longitude=res[1];

    //            };

    //            let j=0;
    //            let q=0;
    //           for(let i=0;i<respon.data.length;i++){

    //               // respon.data[i].showFlag=false;

    //               if(parseInt(respon.data[i].SOC)<30){

    //                     this_.list1[j]=respon.data[i];

    //                     j++;

    //               }
    //             }
    //                 this_.list=this_.list1;
    //                 // this_.offlinelist=respon.data;
    //                 this_.online=respon.data;

    //               for(let i=0;i<this_.online.length;i++){

    //            if(this_.online[i].device_id==this_.offline[i].device_id){

    //                   this_.online[i].status=this_.offline[i].status;

    //                   // this.$set( this_.online[i],'status',this_.offline[i].status)

    //            }
    //           };

    //             this_.$forceUpdate();
    //             // this_.online.forEach(item=>{
    //             //   alert("跟新后的状态值"+item.status)
    //             // })

    //             //判断车辆是否在线的功能
    //               let r=0;
    //               let t=0;
    //       for(let i=0;i<this_.online.length;i++){

    //            if(this_.online[i].status=="online"){
    //                   this_.onlinelist[r]=this_.online[i];
    //                   r++;
    //            }else{
    //               this_.offlinelist[t]=this_.online[i];
    //                   t++
    //            }
    //       };

    //       }).catch(function(error){
    //         // alert("请求数据出错！");
    //       });

    // },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login/login')
    }
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath)
    // },

    // infoWindowClose(i) {
    //   //  alert("关闭提示窗"+i.showFlag)
    //   return (i.showFlag = false)
    // },
    // infoWindowOpen(i) {
    //   // alert("打开提示窗"+i.showFlag)
    //   return (i.showFlag = true)
    // },

    // searchall() {
    //   this.init()
    // }
  }
}
</script>
<style lang="scss">
html {
  //浏览器默认字体大小是16px;62.5%是10px;
  font-size: 62.5%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
#body {
  // width: 100%;
  height: 85.5rem;
  width: 191.3rem;
  // height: 53.5rem;
  // margin: 0 auto;
  background-image: url(../../assets/images/登录背景3.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  // background-position: center;
  // background-color: rgb(0, 101, 105);
  // background-color: #005b5c;
}
.el-button {
  // width: 40%;
  // height: 4rem;
  width: 8rem;
  height: 4rem;
}
.login_box {
  // width: 250px;
  // height: 100px;
  // background-color: #fff;
  // background-color: rgb(0, 101, 105);
  // border-radius: 3px;
  // position: absolute;

  // transform: translate(-50%, -50%);
}
.loginform {
  // width: 10%;
  // height: 10%;
  width: 20rem;
  height: 20rem;
  margin-left: 102.4rem;
  margin-top: 32rem;
  // margin-left: 54.5%;
  // margin-top: 17%;
  // // position: absolute;
  // bottom: 0;
  // width: 80%;
  // padding: 5px 2px;
  // background-color: rgb(0, 101, 105);
  // font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
// .btns {
//   display: flex;
//   justify-content: flex-end;
// }
// .avater_box {
//   height: 130px;
//   width: 130px;
//   border: 1px solid #eee;
//   border-radius: 50%;
//   padding: 10px;
//   box-shadow: 0 0 10px #ddd;
//   position: absolute;
//   left: 50%;
//   transform: translate(-50%, -50%);
//   background-color: #fff;
//   img {
//     width: 100%;
//     height: 100%;
//     border-radius: 50%;
//     background-color: #eee;
//   }
// }
#allmap {
  // height: 700px;

  // margin-left: 150px;
  // margin-right: 155px;
}
#row1 {
  // margin-top: 0px;
  // padding-top: 170px;
  // padding-left: 150px;
}
#row2 {
  // margin-top: 100px;
  // padding-left: 150px;
}
// .el-button {
//   width: 200px;
//   height: 100px;
//   background-color: #005b5c;
// }
// .el-button:hover {
//   width: 250px;
//   height: 150px;
//   background-color: #e5a13e;
//   font-size: 25px;
//   color: #005b5c;
// }
.el-image {
  // margin-left: 150px;
}

// #loginimage {
//   // width: 100%;
//   // height: 100%;
//   // margin-top: 0px;
//   // background-image: url(../assets/images/background.jpg);
//   background-image: url(../../assets/images/登录背景3.jpg);
//   background-repeat: no-repeat;
//   background-position: center;
//   // background-color: rgb(0, 101, 105);
//   background-color: #005b5c;
// }
.table {
  // background-color: rgb(0, 101, 105);
  // background-color: #005b5c;
}

// .el-row {
//   margin-bottom: 20px;
//   &:last-child {
//     margin-bottom: 0;
//   }
// }
// .el-col {
//   border-radius: 4px;
// }
// .bg-purple-dark {
//   background: #99a9bf;
// }
// .bg-purple {
//   background: #d3dce6;
// }
// .bg-purple-light {
//   background: #e5e9f2;
// }
// .grid-content {
//   border-radius: 4px;
//   min-height: 36px;
// }
// .row-bg {
//   padding: 10px 0;
//   background-color: #f9fafc;
// }
// .bm-view {
//   width: 100%;
//   height: 800px;
// }

// .el-header {
//   // background-color: #373d41;
//   // display: flex;
//   align-items: center;
// }
// .el-form-item__label {
//   color: white;
// }
</style>
